<template>
	<view class="content page" id="checkout_counter">
		<status-bar title='支付' :delta='detal'></status-bar>
		<view class="c_ctr_main">
			<view class="c_ctr_info thmeBg" :style="{'--color': color}">
				<view>
					<view>应付</view>
					<view class="price6">
						￥<span class="price6_num">{{total.total_fee?total.total_fee:0}}</span>
					</view>
				</view>
				<image class="img_cover" :src="staticUrl+'/images/checkstand_cover.png'" mode="widthFix"></image>
			</view>
			<view class="c_ctr_list">
				<!-- 线下结算 -->
				<radio-group @change="pay_select(1)" v-if='cashPay == 1'>
					<label class="c_ctr_item">
						<view class="c_ctr_item_info">
							<view class="c_ctr_item_ico">
								<image :src="staticUrl+'/images/p_cash.png'" class="wx_pay" mode="widthFix"></image>
							</view>
							<view class="c_ctr_item_t">线下结算</view>
						</view>
						<view class="fake-radio" :class="pays_selc==1?'thmeBorder thmeBg':''"
							:style="{'--color': color}">
							<text class="icon-xuanzhong iconfont"></text>
							<radio value="1" :checked="pays_selc==1" />
						</view>
					</label>
				</radio-group>

				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信支付 -->
				<radio-group @change="pay_select(2)" v-if='payState == 1'>
					<label class="c_ctr_item">
						<view class="c_ctr_item_info">
							<view class="c_ctr_item_ico">
								<image :src="staticUrl+'/images/weixinPay.png'" class="wx_pay" mode="widthFix"></image>
							</view>
							<view class="c_ctr_item_t">微信支付</view>
						</view>
						<view class="fake-radio" :class="pays_selc==2?'thmeBorder thmeBg':''"
							:style="{'--color': color}">
							<text class="icon-xuanzhong iconfont"></text>
							<radio value="2" :checked="pays_selc==2" />
						</view>
					</label>
				</radio-group>
				<!-- #endif -->
				<!-- 支付宝支付 -->
				<!-- #ifdef MP-TOUTIAO -->
				<radio-group @change="pay_select(3)" v-if='payState == 1'>
					<label class="c_ctr_item">
						<view class="c_ctr_item_info">
							<view class="c_ctr_item_ico">
								<image :src="staticUrl+'/images/wx_pay_ico.png'" class="wx_pay" mode="widthFix"></image>
							</view>
							<view class="c_ctr_item_t">支付宝支付</view>
						</view>
						<view class="fake-radio" :class="pays_selc==3?'thmeBorder thmeBg':''"
							:style="{'--color': color}">
							<text class="icon-xuanzhong iconfont"></text>
							<radio value="6" :checked="pays_selc==3" />
						</view>
					</label>
				</radio-group>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<radio-group @change="pay_select(5)" v-if='payState == 1'>
					<label class="c_ctr_item">
						<view class="c_ctr_item_info">
							<view class="c_ctr_item_ico">
								<image :src="staticUrl+'/images/wx_pay_ico.png'" class="wx_pay" mode="widthFix"></image>
							</view>
							<view class="c_ctr_item_t">支付宝支付</view>
						</view>
						<view class="fake-radio" :class="pays_selc==5?'thmeBorder thmeBg':''"
							:style="{'--color': color}">
							<text class="icon-xuanzhong iconfont"></text>
							<radio value="6" :checked="pays_selc==5" />
						</view>
					</label>

				</radio-group>
				<!-- #endif -->
				<!-- 零钱支付 -->
				<radio-group @change="pay_select(4)">
					<label class="c_ctr_item">
						<view class="c_ctr_item_info">
							<view class="c_ctr_item_ico">
								<image :src="staticUrl+'/images/p_money_ico.png'" class="lq_pay" mode="widthFix">
								</image>
							</view>
							<view class="c_ctr_item_t">余额（剩余￥{{total.v_momey?total.v_momey:0}}）</view>
						</view>
						<view class="fake-radio" :class="pays_selc==4?'thmeBorder thmeBg':''"
							:style="{'--color': color}">
							<text class="icon-xuanzhong iconfont"></text>
							<radio value="2" :checked="pays_selc==4" />
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="c_ctr_pay btn3 thmeBg" :style="{'--color': color}" @click="pay_money" v-if='!notEnough'>
			{{payAPP}}支付￥{{total.total_fee?total.total_fee:0}}</view>
		<navigator url='/moneyPage/capital/recharge' hover-class="none" v-else>
			<view class="c_ctr_pay btn3" style="background-color: #ED9648;" @click="pay_money">余额不足，去充值</view>
		</navigator>
	</view>
</template>
<script>
	var that;
	import { mapState } from 'vuex';
	export default {
		data() {
			return {

				payFlag: true,
				pays_selc: true,
				payAPP: "",
				paytype: 0,
				playid: '',

				total: '',

				mode: uni.getStorageSync('mode'),
				staticUrl: this.staticUrl,
				notEnough: false, // 余额不足	
				cashPay: uni.getStorageSync('startUp').cashPay, // 是否开起线下付款 1开起 0不开启
				payState: uni.getStorageSync('startUp').payState, // 是否开起支付功能 1开起 0不开启
				detal: 1,
				car_id: '',
				tid: '',
				union_order_code: '',
				flag: false
			}
		},
		onShow() {
			that = this
			if (uni.getStorageSync('path') == '12') { // 支付成功返回
				this.backHome()
			}
			that.notEnough = false;
			that.payFlag = true;
			// #ifdef MP-TOUTIAO
			that.payAPP = '支付宝';
			that.pays_selc = 3;
			that.paytype = 6
			// #endif
			// #ifdef MP-WEIXIN || H5
			that.payAPP = '微信';
			that.paytype = 1
			that.pays_selc = 2;
			// #endif
			// #ifdef APP-PLUS
			that.payAPP = '支付宝';
			that.pays_selc = 5;
			that.paytype = 10
			// #endif

			if (that.cashPay == 1) {
				that.payAPP = '线下结算';
				that.pays_selc = 1;
				that.paytype = 99
			}
		},

		onLoad(e) {
			console.log('e', e)
			that = this
			that.playid = e.payid
			if (e.car_id) this.car_id = e.car_id
			if (e.tid) this.tid = e.tid
			if (e.union_order_code) this.union_order_code = e.union_order_code
			that.getPageData();
			if (e.path == 1) { // 从下单页面来的
				that.detal = 2
			}

		},
		methods: {
			pay_select: function(n) {
				that.pays_selc = n;
				that.notEnough = false;
				if (n == 1) {
					that.payAPP = '线下结算'
					that.paytype = 99
				}
				if (n == 2) { //微信支付
					that.payAPP = '微信'
					that.paytype = 1
				}
				if (n == 3) { // 抖音支付宝
					that.payAPP = '支付宝'
					that.paytype = 6
				}
				if (n == 4) {
					that.payAPP = '零钱'
					that.paytype = 2;
					if (parseFloat(that.total.total_fee) > parseFloat(that.total.v_momey)) {
						that.notEnough = true;
					}
				}
				if (n == 5) { // app支付宝
					that.payAPP = '支付宝'
					that.paytype = 10
				}
			},
			getPageData: function() { //获取页面初始化数据
				that.$http.post({
					url: '/accountPay/getOrderInfo3',
					data: {
						orderAesStr: that.playid,

					}
				}).then(res => {
					if (res.code == 100) {
						that.total = res.data
					}
				})
			},
			pay_money: function() {
				if (that.paytype == 2 && that.notEnough) { // 余额不足
					return
				}
				if (!that.payFlag) { return } // 避免重复提交
				that.payFlag = false;
				uni.showLoading({
					title: '支付中···'
				})
				that.$http.post({
					url: '/accountPay/cashierStorePageAjax',
					data: {
						vid: that.vid,
						orderAesStr: that.playid,
						payType: that.paytype,
						openId: that.openid
					}
				}).then(res => {
					uni.hideLoading()
					if (res.code == 100) {
						that.flag = true
						var data = res.data;
						if (that.paytype == 99) { // 货到付款成功
							uni.navigateTo({
								url: '/pages/index/pay_scs?playid=' + that.playid
							})
							return
						}
						if (that.paytype == 10) { // app支付宝支付
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: data.params, //微信、支付宝订单数据
								success: function(res1) {
									console.log('success:' + JSON.stringify(res1));
									uni.navigateTo({
										url: '/pages/index/pay_scs?playid=' + that.playid
									})
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
									uni.navigateTo({
										url: '/pages/index/orderList?status=0&clickNav=1'
									})
								}
							});
							return
						}
						if (that.paytype == 2) { // 零钱支付
							uni.redirectTo({
								url: '/pages/index/pay_scs?playid=' + that.playid
							})
						} else {
							// #ifdef MP-TOUTIAO
							tt.login({
								success(res) {
									tt.requestPayment({
										data: {
											app_id: data.app_id,
											method: data.method,
											sign: data.sign,
											sign_type: data.sign_type,
											timestamp: data.timestamp,
											trade_no: data.trade_no,
											merchant_id: data.merchant_id,
											uid: data.uid,
											total_amount: data.total_amount,
											pay_channel: data.pay_channel,
											pay_type: data.paytype,
											return_url: "/pages/index/orderList",
											show_url: "",
											risk_info: data.risk_info,
											params: data.params,
										},
										success() {
											console.log("支付成功吊起")
											uni.navigateTo({
												url: '/pages/index/pay_scs?playid=' +
													that.playid
											})
										},
										fail() {
											console.log("失败：")
											uni.navigateTo({
												url: '/pages/index/orderList?status=0&clickNav=1'
											})
										}
									})
								}
							})
							// #endif
							// #ifdef MP-WEIXIN
							uni.getProvider({
								service: 'oauth',
								success: function(resp) {
									console.log(resp.provider)
									if (resp.provider) {
										uni.requestPayment({
											provider: resp.provider[0],
											orderInfo: data,
											timeStamp: data.timeStamp,
											nonceStr: data.nonceStr,
											package: data.package,
											signType: data.signType,
											paySign: data.paySign,
											success: function(resj) {
												console.log('success:' + JSON
													.stringify(resj));
												uni.navigateTo({
													url: '/pages/index/pay_scs?playid=' +
														that.playid
												})
											},
											fail: function(err) {
												console.log('fail:' + JSON.stringify(
													err));
												uni.navigateTo({
													url: '/pages/index/orderList?status=0&clickNav=1'
												})
											}
										})
									}
								}
							})
							// #endif
						}
					} else {
						if (that.paytype == 99) { // 货到付款不成功
							uni.navigateTo({
								url: '/pages/index/orderList?status=0&clickNav=1'
							})
							return
						}
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
					}
				})
			}
		},
		onUnload() {

			if (this.tid && !this.flag) {
				this.$http.post({
					url: '/singleSaleApi/tableConfirmOrder',
					data: {
						union_order_code: this.union_order_code,
						car_id: this.car_id,
						tid: this.tid
					}
				}).then(res => {
					console.log(res)
				})
			}
		},
		computed: {
			...mapState(['vid', 'color', 'openid'])
		}
	}
</script>

<style scoped>
	radio {
		transform: scale(0.7)
	}

	.wx_pay {
		width: 54upx;
		height: 54upx;
	}

	.lq_pay {
		width: 52upx;
		height: 52upx;
	}

	.price6_num {
		font-size: 60upx;
	}

	#checkout_counter .c_ctr_main {
		background: #ffffff;
	}

	.c_ctr_main .c_ctr_info {
		height: 360upx;
		margin-bottom: 68upx;
		display: flex;
		display: -webkit-flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: #ffffff;
		position: relative;
	}

	.img_cover {
		height: 38upx;
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.c_ctr_info .price6 {
		margin-top: 20upx;
	}

	.c_ctr_main .c_ctr_list {
		padding: 0 30upx;
	}

	.c_ctr_list .c_ctr_item {
		height: 112upx;
		border-bottom: 1px solid #dddddd;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
	}

	.c_ctr_item .c_ctr_item_info {
		display: flex;
		display: -webkit-flex;
		align-items: center;
	}

	.c_ctr_item_info .c_ctr_item_ico {
		width: 56upx;
		height: 56upx;
		display: flex;
		display: -webkit-flex;
		justify-content: center;
		align-items: center;
	}

	.c_ctr_item_info .c_ctr_item_t {
		width: 560upx;
		margin-left: 20upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28upx;
		font-family: arial;
	}

	.c_ctr_pay {
		position: fixed;
		right: 0;
		bottom: 30upx;
		left: 0;
		z-index: 999;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}
</style>